<template>
	<view class="">
		<view class="nav">
			<image class="w100 h100" src="@/static/index/bg.png" mode=""></image>
		</view>
		<view class="pa0 w100">
			<view class="cont">
				<view class="" :style="{height: `${navh}px`}"></view>
				<view class="flex_btw">
					<view class="cf fw400 fs30">登录</view>
					<view class="flex_x">
						<image style="width: 33rpx;height: 33rpx;" src="@/static/index/kf.png" mode=""></image>
						<image class="mlr50" style="width: 35rpx;height: 33rpx;" src="@/static/index/xx.png" mode="">
						</image>
						<image style="width: 30rpx;height: 25rpx;" src="@/static/index/gd.png" mode=""></image>
					</view>
				</view>
				<view class="mt44 ipt flex_x">
					<image style="width: 31rpx;height: 35rpx;" src="@/static/index/ss.png" mode=""></image>
					<view class="mlr18 flex1">
						<u--input placeholder="活钱生利天天盈" border="none" v-model="value"></u--input>
					</view>
					<image style="width: 27rpx;height: 33rpx;" src="@/static/index/ly.png" mode=""></image>
				</view>
				<view class="mt20 bgf br14 ovh">
					<view class="flex_x ml40">
						<view class="c0 fw500 fs28 h64 flex_x">常用</view>
						<view class="flex1 pr">
							<image class="w100 h64" src="@/static/index/sy_bg.png" mode=""></image>
							<view class="pa0 w100 h100">
								<view class="h64 c3 fs28 flex_x ml130">私银</view>
							</view>
						</view>
					</view>
					<view class="stock">
						<view class="flex_btw plr30">
							<view class="flex_col_c" @click="toPath('/pages/my/detail')">
								<image style="width: 74rpx;height: 81rpx;" src="@/static/index/zh.png" mode=""></image>
								<view class="mt24 c0 fw500 fs26">账户</view>
							</view>
							<view class="flex_col_c">
								<image style="width: 74rpx;height: 81rpx;" src="@/static/index/zc.png" mode=""></image>
								<view class="mt24 c0 fw500 fs26">资产</view>
							</view>
							<view class="flex_col_c">
								<image style="width: 74rpx;height: 81rpx;" src="@/static/index/mx.png" mode=""></image>
								<view class="mt24 c0 fw500 fs26">明细</view>
							</view>
							<view class="flex_col_c">
								<image style="width: 74rpx;height: 81rpx;" src="@/static/index/zf.png" mode=""></image>
								<view class="mt24 c0 fw500 fs26">支付</view>
							</view>
						</view>

						<view class="mt40 memu">
							<view class="flex_col_c" v-for="item in menu" :key="item.id">
								<image :src="item.img" :style="[item.sty_img]" mode=""></image>
								<view class="mt16 c0 fs24">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>

				<view class="msg p24 br12 flex_btw">
					<view class="msg_icon cf fs18 flex_c">消息</view>
					<view class="mlr22 flex1 c3 fs22">您还没有收到消息，快来签约免费动账通知吧!</view>
					<u-icon name="arrow-right" color="#000000" size="14"></u-icon>
				</view>

				<view class="ml44 pt20">
					<view class="c0 bold fs38">个人养老金</view>
					<view class="flex_x mt20 ">
						<view class="c3 fs24">开户缴存享好礼</view>
						<image class="ml8 img24" src="@/static/index/yjt.png" mode=""></image>
					</view>
				</view>

				<view class="bgf p2818 br14 mt80">
					<view class="flex_btw">
						<view class="c3 fs28">工银财富</view>
						<view class="c6 fs22">更多</view>
					</view>
					<view class="mt32 flex">
						<view class="flex1 h120 pr">
							<image class="w100 h100" src="@/static/index/zszq.png" mode=""></image>
							<view class="pa0 w100 h100">
								<view class="p18">
									<view class="c0 fw500 fs28">指数专区</view>
									<view class="mt10 c6 fw400 fs20">忠实跟踪分散投资</view>
								</view>
							</view>
						</view>
						<view class="flex1 ml20 h120 pr">
							<image class="w100 h100" src="/static/index/sqxb.png" mode=""></image>
							<view class="pa0 w100 h100">
								<view class="p18">
									<view class="c0 fw500 fs28">社区寻宝</view>
									<view class="mt10 c6 fw400 fs20">集能量 兑好礼</view>
								</view>
							</view>
						</view>
					</view>

					<view class="mt32 flex_x">
						<view class="deg mr24" :class="{'dega':active == index}" v-for="(item,index) in deg_list"
							:key="item.id" @click="active = index">{{item.name}}</view>
					</view>

					<view class="mt50">
						<view class="c3 fs22">天天盈</view>
						<view class="mt32 flex_x">
							<view class="">
								<view class="fw500 fs28" style="color: #EB151E;">2.1295%</view>
								<view class="mt22 c6 fs22">综合7日年化收益率</view>
							</view>
							<view class="ml44">
								<view class="c0 fw400 fs28">单日单只1万快赎</view>
								<view class="mt22 c6 fs20">随用随取 | 1分起购 | 低风险</view>
							</view>
						</view>
					</view>
					<view class="cut_line mt34"></view>
					<view class="mt30">
						<view class="c3 fs22">个人人民币通知存款(7天)</view>
						<view class="mt30 flex_x">
							<view class="">
								<view class="fw500 fs28" style="color: #EB151E;">1.45%</view>
								<view class="mt22 c6 fs22">年利率最高可至</view>
							</view>
							<view class="ml44">
								<view class="c0 fw400 fs28">5万起存</view>
								<view class="mt22 c6 fs20">5万元起存 | 7天通知 </view>
							</view>
						</view>
					</view>
				</view>

				<view class="mt20 p3018 bgf br14">
					<view class="c0 fs28">客群专区</view>
					<view class="mt30 group">
						<view class="flex1 h110 pr" v-for="item in group" :key="item.id">
							<image class="w100 h100" :src="item.img" mode=""></image>
							<view class="pa0 w100 h100">
								<view class="p2022">
									<view class="c0 fw500 fs26">{{item.title}}</view>
									<view class="mt10 c6 fw400 fs22">{{item.name}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="mt20 p2818 bgf br14">
					<view class="flex_btw">
						<view class="c0 fs28">云网点</view>
						<view class="c6 fs22">更多</view>
					</view>
					<view class="mt32 h200 pr">
						<image class="w100 h100" src="@/static/index/dw.png" mode=""></image>
						<view class="pa0 w100 h100">
							<view class="mt20 c0 fw500 fs28 tc">定位服务未开启</view>
							<view class="mt16 c6 fs24 tc">开启后可获得附近网点信息</view>
							<view class="mt14 flex_y">
								<view class="dw_btn fw500 fs28 flex_c">开启定位</view>
							</view>
						</view>
					</view>
				</view>

				<view class="mt20 p3018 bgf br14">
					<view class="flex_btw">
						<view class="c0 fs28">云网点</view>
						<view class="c6 fs22">更多</view>
					</view>
					<view class="mt30 group">
						<view class="flex1 h110 pr" v-for="item in branch" :key="item.id">
							<image class="w100 h100" :src="item.img" mode=""></image>
							<view class="pa0 w100 h100">
								<view class="p2022">
									<view class="c0 fw500 fs26">{{item.title}}</view>
									<view class="mt10 c6 fw400 fs22">{{item.name}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>


				<view class="mt20 p3018 bgf br14">
					<view class="flex_btw">
						<view class="c0 fs28">金融日历</view>
						<view class="c6 fs22">更多</view>
					</view>
					<view class="mt30 flex_btw">
						<view class="flex1 flex_c" v-for="item in calendar" :key="item.id">
							<view class="flex_col_c" :class="{'calendara':item.id == 4}">
								<view class="c3 fs24" :class="{'calendar_text':item.id>5}">{{item.num}}</view>
								<view class="mt10 c6 fs18" :class="{'calendar_text':item.id>5}">{{item.name}}</view>
							</view>
						</view>
					</view>

					<view class="mt60 flex_btw">
						<view class="flex_x">
							<image style="width: 60upx;height: 62upx;" src="@/static/index/xxjlb.png" mode=""></image>
							<view class="ml18">
								<view class="c0 fw400 fs26">小象俱乐部</view>
								<view class="mt10 c6 fw400 fs20">全新权益快来体验</view>
							</view>
						</view>
						<view class="calendar_btn fw400 fs22 flex_c">点击进入</view>
					</view>
				</view>

				<view class="mt24 p3018 bgf br14 flex_col_c">
					<view class="individuality_btn fw500 fs28 flex_c">发现更多服务</view>
					<view class="mt20 c3 fs22 tc">打造个性化首页</view>
				</view>

				<view class="mt24 p2024 bgf br14 flex_btw">
					<view class="ml14 flex_x">
						<image style="width: 40rpx;height: 46rpx;" src="@/static/index/kfzl.png" mode=""></image>
						<view class="ml16 c0 fw400 fs26">客户投诉指南</view>
					</view>
					<u-icon name="arrow-right" color="#000000" size="14"></u-icon>
				</view>

				<view class="mt20 flex_btw">
					<image class="flex1 h110" src="@/static/index/slh.png" mode=""></image>
					<image class="flex1 h110 mlr14" src="@/static/index/ckbx.png" mode=""></image>
					<image class="flex1 h110" src="@/static/index/jrkf.png" mode=""></image>
				</view>

				<view class="mt60 pr">
					<view class="c3 fs24 tc">中国工商银行支持 <text class="ip fs20">IPv6</text> 网络</view>
					<view class="mt30 c6 fw400 fs18 tc">ICP备案号：京ICP证030247号</view>
					<view class="mt16 c6 fw400 fs20 tc">备案系统网址
						<text style="color: #3E71CD;">https://beian.miit.gov.cn/</text>
					</view>
					<view class="ly_img flex_c">
						<image class="ly_imga" src="@/static/index/ly_img.png" mode=""></image>
					</view>
				</view>

			</view>
		</view>


		<view class="">
			<tabbar :value="1"></tabbar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:'',
				menu: [{
						id: 1,
						img: '/static/index/ck.png',
						name: '存款',
						sty_img: {
							width: '61upx',
							height: '61upx',
						}
					},
					{
						id: 2,
						img: '/static/index/zsq.png',
						name: '智申请',
						sty_img: {
							width: '61upx',
							height: '56upx',
						}
					},
					{
						id: 3,
						img: '/static/index/cf.png',
						name: '财富',
						sty_img: {
							width: '61upx',
							height: '56upx',
						}
					},
					{
						id: 4,
						img: '/static/index/dk.png',
						name: '贷款',
						sty_img: {
							width: '61upx',
							height: '60upx',
						}
					},
					{
						id: 5,
						img: '/static/index/shjf.png',
						name: '生活缴费',
						sty_img: {
							width: '61upx',
							height: '60upx',
						}
					},
					{
						id: 6,
						img: '/static/index/tty.png',
						name: '天天盈',
						sty_img: {
							width: '61upx',
							height: '62upx',
						}
					},
					{
						id: 7,
						img: '/static/index/xgj.png',
						name: '薪管家',
						sty_img: {
							width: '80upx',
							height: '64upx',
						}
					},
					{
						id: 8,
						img: '/static/index/grylj.png',
						name: '个人养老金',
						sty_img: {
							width: '80upx',
							height: '65upx',
						}
					},
					{
						id: 9,
						img: '/static/index/jtcf.png',
						name: '家庭财富',
						sty_img: {
							width: '84upx',
							height: '70upx',
						}
					},
					{
						id: 10,
						img: '/static/index/gjs.png',
						name: '贵金属',
						sty_img: {
							width: '60upx',
							height: '50upx',
						}
					}
				],
				deg_list: [{
						id: 1,
						name: '活钱生利'
					},
					{
						id: 2,
						name: '低波稳健'
					},
					{
						id: 3,
						name: '进取投资'
					},
					{
						id: 4,
						name: '保障无忧'
					}
				],
				active: 0,
				group: [{
						id: 1,
						img: '/static/index/phjr.png',
						title: '普惠金融',
						name: '工银普惠行'
					},
					{
						id: 2,
						img: '/static/index/yjzq.png',
						title: '拥军专区',
						name: '拥军优抚伴您行'
					},
					{
						id: 3,
						img: '/static/index/fwxsm.png',
						title: '服务新市民',
						name: '护航城市梦'
					},
					{
						id: 4,
						img: '/static/index/dfx.png',
						title: '代发薪',
						name: '薪资打理好帮手'
					},
					{
						id: 5,
						img: '/static/index/bbbcz.png',
						title: '伴宝贝成长',
						name: '子女账户轻松管'
					},
					{
						id: 6,
						img: '/static/index/yljr.png',
						title: '养老金融',
						name: '安心养老 幸福一生'
					}
				],
				branch: [{
						id: 1,
						img: '/static/index/gyxly.png',
						title: '工银星礼遇',
						name: '尽享丰富权益'
					},
					{
						id: 2,
						img: '/static/index/hsjlb.png',
						title: '贺岁纪念币',
						name: '火热预约中'
					},
					{
						id: 3,
						img: '/static/index/ddbfxf.png',
						title: '定点帮扶消费',
						name: '好物精选直达'
					},
					{
						id: 4,
						img: '/static/index/xfjy.png',
						title: '幸福愿景',
						name: '送您每日小确幸'
					},
				],
				calendar: [{
						id: 1,
						num: '18',
						name: '周一'
					},
					{
						id: 2,
						num: '19',
						name: '周二'
					},
					{
						id: 3,
						num: '20',
						name: '周三'
					},
					{
						id: 4,
						num: '21',
						name: '周四'
					},
					{
						id: 5,
						num: '22',
						name: '周五'
					},
					{
						id: 6,
						num: '23',
						name: '周六'
					},
					{
						id: 7,
						num: '24',
						name: '周日'
					},
				]
			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {

		},
		computed: {

		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		height: 1190upx;
	}

	.cont {
		padding: 0 30upx calc(120upx + env(safe-area-inset-bottom)) 30upx;

		.ipt {
			padding: 17rpx 30upx 16upx 27upx;
			background-color: #FBE2E2;
			border-radius: 36upx;
		}

		.stock {
			padding: 24upx 10upx 40upx 10upx;

			.memu {
				display: grid;
				grid-gap: 54upx 26upx;
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
			}
		}

		.msg {
			background-image: linear-gradient(to bottom, #FEF4F3, #FFFFFF);

			.msg_icon {
				width: 48upx;
				height: 30upx;
				background: #EB141D;
				border-radius: 4upx;
			}
		}

		.deg {
			padding: 14upx 16upx;
			background: #F5F5F5;
			border-radius: 30upx;
			color: #333333;
			font-size: 22upx;

		}

		.dega {
			background: #FFE3E4 !important;
			color: #EB141D !important;
			font-weight: 500;
		}

		.group {
			display: grid;
			grid-gap: 18upx 18upx;
			grid-template-columns: 1fr 1fr;
		}

		.dw_btn {
			width: 164upx;
			height: 56upx;
			border: 2upx solid #FF0000;
			border-radius: 28upx;
			color: #EB151E;
		}

		.calendara {
			width: 66upx;
			height: 66upx;
			background: #F3F8FE;
			border: 2upx solid #225E98;
			border-radius: 50%;
		}

		.calendar_text {
			color: #225E98 !important;
		}

		.calendar_btn {
			width: 130upx;
			height: 46upx;
			border: 2upx solid #FF0000;
			border-radius: 26upx;
			color: #EB151E;
		}

		.individuality_btn {
			width: 260upx;
			height: 64upx;
			border: 2upx solid #3E71CD;
			border-radius: 32upx;
			color: #3E71CD;
		}

		.ip {
			display: inline-block;
			width: 54upx;
			height: 24upx;
			
			text-align: center;
			line-height: 24upx;
			border: 2upx solid #FF0000;
			border-radius: 20upx;
			color: #FE2929;
			margin: 0 10upx;
		}
		.ly_img{
			position: absolute;
			top: -40upx;
			right: -30upx;
			z-index: 99;
			width: 115upx;
			height: 110upx;
			background: #FFFFFF;
			border-radius: 55upx 0 0 55upx;
			.ly_imga{
				width: 90upx;
				height: 90upx;
			}
			
		}
	}
</style>